<template>
  <!-- 预览/推送 -->
  <h-modal class="event-modal event-moda2" v-model="show" title="值班表" @submit="show = false" hideFooter>
    <h-query
      :showKey="[]"
      :query="query"
      @search="search">
      <div slot="btn" class="a-button-right" style="margin-top: 8px">
        <UploadImageMutil
          type="button"
          ref="image"
          text="更新值班图片"
          :length="100"
          @getUrl="addDutyImg"
          style="margin-right: 12px" />
        <a-button type="primary" @click="showEdit = true">添加值班人员</a-button>
        <UploadExcel action="/web/duty/download" @change="$refs.htable.refresh(true)" />
        <a-button @click="toURL">Excel模板</a-button>

      </div>
    </h-query>

    <div style="text-align: right;margin-right: 12px">
      <viewer v-if="img.img" :images="[img.img]">
        <a class="look-img">查看值班表图片
          <img :src="img.img" width="120px" alt="">
        </a>
      </viewer>
    </div>

    <a-form-model :model="form" size="large">
      <a-row :gutter="0">
        <a-col :span="24">
          <!-- <h-tooltip class="cancel-btn" title="这个接口还没好吧" /> -->
          <a-form-model-item label="">
            <table class="hg-dialog-table" cellspacing="0" cellpadding="0" border="0">
              <tr v-for="(item, i) in listNew" :key="i">
                <td width="100px" v-for="(itemel, j) in item" :key="j" :rowspan="itemel.rowspan">
                  {{ itemel.name }}
                </td>
              </tr>
            </table>
            <!-- <h-table
              ref="htable"
              @init="getList"
              :config="config"
              :showHeadBgNone="false"
              :zebraStripes="false">
              <template slot="action" slot-scope="{record}">
                <a @click="remove(record)">删除</a>
              </template>
            </h-table> -->
          </a-form-model-item>

        </a-col>
      </a-row>

    </a-form-model>

    <a-modal v-model="showEdit" title="" :maskClosable="false" @ok="edit">
      <a-form-model ref="ruleFormEdit" :model="formEdit" :rules="rulesEdit" size="large">
        <a-row :gutter="0">
          <a-col :span="24">
            <a-form-model-item label="值班人员" prop="name">
              <!-- <a-input v-model="formEdit.name"></a-input> -->
              <a-select v-model="formEdit.name" placeholder="请选择">
                <a-select-option v-for="item in leader" :value="item.realname" :key="item.realname">{{ item.realname }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="值班日期" prop="time">
              <!-- <a-textarea v-model="formEdit.dutyTime" :rows="5"></a-textarea> -->
              <a-date-picker
                :format="'YYYY-MM-DD'"
                style="width: 100%"
                v-model="formEdit.time"
                placeholder="选择时间"
                @change="change"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="身份" prop="dutyName">
              <!-- <a-input v-model="formEdit.dutyName"></a-input> -->
              <a-select v-model="formEdit.dutyName" placeholder="请选择">
                <a-select-option value="白班" key="1">白班</a-select-option>
                <a-select-option value="晚班" key="2">晚班</a-select-option>
                <a-select-option value="带班" key="3">带班</a-select-option>
                <a-select-option value="办领导" key="4">办领导</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-modal></h-modal>
</template>

<script>
import moment from 'moment';
// eslint-disable-next-line no-unused-vars
import { getDutyLists, addDutyInfo, deleteDutyInfo, getLeader, getExcel, addDutyImg, getDutyImg } from '@/api/serve';
import UploadExcel from '@/components/UploadExcel/Index';
import UploadImageMutil from '@/components/UploadImageMutil';

export default {
  props: {
    showModal: {
      type: Boolean,
      default: false
    }
  },
  components: {
    UploadExcel,
    UploadImageMutil
  },
  model: {
    prop: 'showModal',
    event: 'update:showModal'
  },
  watch: {
    showModal: {
      handler(val) {
        this.show = val;
        if (val) {
          this.getList();
          getLeader().then(res => {
            this.leader = res.data;
          });
          getDutyImg().then(res => {
            this.img = res.data;
          });
        }
      },
      immediate: true
    },
    show(val) {
      this.$emit('update:showModal', val);
    }
  },
  data() {
    return {
      img: {

      },
      moment,
      ids: [],
      leader: [],
      time: '',
      showEdit: false,
      formEdit: {

      },
      listNew: [],
      listNew1: [
        ['配置', '星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
        ['日期', '', '04月01日', '04月02日', '04月03日', '04月04日', '04月05日', '04月06日'],
        ['白班', '', '李正', '刘鑫', '张华健', '杨培', '王润辉', '李正'],
        ['晚班', '', '张华健', '钱天亮', '周珂', '杨培', '王润辉', '李正'],
        ['带班', '', '吴剑', '胡倩膏', '今猛榨', '赏阳', '张乃金', '程宁'],
        ['办领导', '', '韩利钢', '李忠', '陈勇', '林大吉', '顾志强', '韩利钢'],
        ['', '', '', '', '', '', '', ''],
        ['日期', '04月07日', '04月08日', '04月09日', '04月10日', '04月11日', '04月12日', '04月13日'],
        ['白班', '钱天亮', '王旭艳', '周珂', '曾斌', '练丽亚', '何思强', '孙钢辉'],
        ['晚班', '练丽亚', '马今东', '杨培', '孙钢辉', '俞晨晟', '何思强', '孙钢辉'],
        ['带班', '吴国兴', '叶子伟', '赏阳', '张乃金', '程宁', '吴云波', '今猛榨'],
        [
            '办领导',
            '李忠',
            '陈勇',
            '林大吉',
            '顾志强',
            '韩利钢',
            '李忠',
            '陈勇'
        ],
        [
            '',
            '',
            '',
            '',
            '',
            '',
            '',
            ''
        ],
        [
            '日期',
            '04月14日',
            '04月15日',
            '04月16日',
            '04月17日',
            '04月18日',
            '04月19日',
            '04月20日'
        ],
        [
            '白班',
            '',
            '',
            '',
            '',
            '',
            '',
            ''
        ],
        [
            '晚班',
            '',
            '',
            '',
            '',
            '',
            '',
            ''
        ],
        [
            '带班',
            '',
            '',
            '',
            '',
            '',
            '',
            ''
        ],
        [
            '办领导',
            '',
            '',
            '',
            '',
            '',
            '',
            ''
        ],
        [
            '',
            '',
            '',
            '',
            '',
            '',
            '',
            ''
        ],
        [
            '日期',
            '04月21日',
            '04月22日',
            '04月23日',
            '04月24日',
            '04月25日',
            '04月26日',
            '04月27日'
        ],
        [
            '白班',
            '',
            '',
            '',
            '',
            '',
            '',
            ''
        ],
        [
            '晚班',
            '',
            '',
            '',
            '',
            '',
            '',
            ''
        ],
        [
            '带班',
            '',
            '',
            '',
            '',
            '',
            '',
            ''
        ],
        [
            '办领导',
            '',
            '',
            '',
            '',
            '',
            '',
            ''
        ],
        [
            '',
            '',
            '',
            '',
            '',
            '',
            '',
            ''
        ],
        [
            '日期',
            '04月28日',
            '04月29日',
            '04月30日',
            '',
            '',
            '',
            ''
        ],
        [
            '白班',
            '',
            '',
            '',
            '',
            '',
            '',
            ''
        ],
        [
            '晚班',
            '',
            '',
            '',
            '',
            '',
            '',
            ''
        ],
        [
            '带班',
            '',
            '',
            '',
            '',
            '',
            '',
            ''
        ],
        [
            '办领导',
            '',
            '',
            '',
            '',
            '',
            '',
            ''
        ]
    ],
      show: false,
      form: {},
      query: [
        {
          key: 'time',
          type: 'dateM',
          label: '时间'
        }
      ],
      config: {
        rowKey: 'id',
        dataSource: [],
        columns: [
          {
            align: 'center',
            title: '姓名',
            dataIndex: 'name'
          },
          // {
          //   align: 'center',
          //   title: '身份',
          //   dataIndex: 'dutyName'
          // },
          {
            align: 'center',
            title: '日期',
            dataIndex: 'dutyTime'
          },
          {
            align: 'center',
            title: '操作',
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' }
          }
        ],
        pagination: {
          pageNo: 1,
          pageSize: 7,
          total: 0
        }
      },
      queryParams: {
        pageNo: 1,
        pageSize: 7
      },
      rulesEdit: {
        name: [{ required: true, message: '请输入' }],
        dutyTime: [{ required: true, message: '请输入' }]
      }
    };
  },
  methods: {
    edit() {
      this.$refs.ruleFormEdit.validate(valid => {
        if (valid) {
          const form = JSON.parse(JSON.stringify(this.formEdit));
          delete form.time;
          addDutyInfo(form).then(res => {
            this.$message.success('添加成功');
            this.getList();
            this.showEdit = false;
            this.formEdit = {};
          });
        } else {

        }
      });
    },
    addDutyImg(url) {
      // alert(url);
      addDutyImg({
        ...this.img,
        img: url
      }).then(res => {
        this.$message.success('修改成功！');
        getDutyImg().then(res => {
            this.img = res.data;
          });
      });
    },
    change(e, time) {
      this.formEdit.dutyTime = e;
      console.log(e);
      this.$set(this.formEdit, 'dutyTime', moment(e).format('YYYY年MM月DD日'));
    },
    remove({ id }) {
      deleteDutyInfo({ id }).then(res => {
        this.$message.success('删除成功');
        this.getList();
      });
    },
    getList(params) {
      if (params) Object.assign(this.queryParams, params);
      getExcel(this.queryParams).then(res => {
            this.listNew1 = res.data;
            this.listNew1.forEach((element, i) => {
        if (element[0] !== '白班' && element[0].name !== '晚班') {
          element.forEach((element2, x) => {
            element[x] = {
              rowspan: 1,
              name: element2
            };
          });
        }
            if (element[0] === '白班') {
              for (let index = 7; index >= 0; index--) {
                if (element[index] !== '') {
                  if (element[index] === this.listNew1[i + 1][index]) {
                    console.log(element[index]);
                    element[index] = {
                      rowspan: 2,
                      name: element[index]
                    };
                    this.listNew1[i + 1].splice(index, 1);
                  } else {
                    element[index] = {
                      rowspan: 1,
                      name: element[index]
                    };
                    this.listNew1[i + 1][index] = {
                      rowspan: 1,
                      name: this.listNew1[i + 1][index]
                    };
                  }
                } else {
                  element[index] = {
                    rowspan: 1,
                    name: ''
                  };
                }
              }
            }
          });
          this.listNew = this.listNew1;
          });

      getDutyLists(this.queryParams).then(res => {
        this.config.dataSource = res.data.records;
        this.config.pagination.total = res.data.total;
      });
    },
    search(params) {
      this.getList(params);
    },
    select({ selectedRowKeys }) {
      // console.log(e);
      this.ids = selectedRowKeys;
    },
    pushReviewBath({ id }) {
      if (!this.ids.length && !id) {
        this.$message.error('请先选择！');
        return;
      }
      // const that = this;
      this.$confirm({
        title: '温馨提示',
        content: '确认要推送吗？',
        onOk() {
          // const idList = id ? [id] : this.ids;
          // pushReviewBath({
          //   idList
          // }).then(res => {
          //   that.$message.success(res.msg);
          //   that.ids = [];
          //   that.$refs.htable.cancel();
          //   that.getList();
          // });
        }
      });
    },
    toURL() {
      window.open(process.env.VUE_APP_SERVER_URL + '/web/duty/downloadIrsEvent');
    }
  }
};
</script>

<style lang="less">
.event-moda2 .a-button-right {
  display: flex;
  /* width: 400px; */
}
.look-img {
  position: relative;
  img {
    position: absolute;
    left: 0;
    opacity: 0;
  }
}
.hg-dialog-table {
  width: 100%;
  border-color: grey;
  font-size: 14px;
  border-top: 1px solid #ebeef5;
  border-left: 1px solid #ebeef5;
  &.no-top-border{
    border-top:unset
  }
  tr {
    background-color: #fff;
    td {
      border-right: 1px solid #ebeef5;
      border-bottom: 1px solid #ebeef5;
      padding: 10px;
      height: 50px;
      box-sizing: border-box;
      text-overflow: ellipsis;
      text-align: center;
    }
  }
}
</style>
